<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('图表')" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!--
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="../static/js/macarons.js" th:src="@{/js/macarons.js}"></script>
</head>

<body style="height: 100%; margin: 0">


    <!--<div id="container" style="width: 48%;height: 50%;float: left"></div>
    <div  style="height: 50%;width: 4%;float: left"></div>-->
    <div style="height: 100% ;width: 49%;float: left">
        <div style="height: 50%;width: 100%;float: left">
            <!-- <div style="width: 100%">
                 <label>请选择实验</label>
                 <select th:with="experiments = ${@experiment.selectTbExperimentList(null)}" id="experiment" th:onclick="changeExperiment()">
                     <option th:each="experiment : ${experiments}" th:text="${experiment.experimentName}" th:value="${experiment.experimentId}"></option>
                 </select>
             </div>-->
            <input th:type="hidden" value="1" id="experiment"/>
            <div id="score" style="width: 100%;height: 381px"></div>
        </div>
        <div style="height: 50%;width: 100%;float: left" id="overall">

        </div>
    </div>
    <div style="width:50%;height: 100%;float: left">
        <iframe
                id="ppt" src='..//experimentTimetable2.pdf' width='100%' height='100%' frameborder='1'>
        </iframe>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>

    <script th:inline="javascript">
        var ctx = [[@{/}]];
    </script>
    <script type="text/javascript">

        /*$(function () {
            var src = ctx + "/experimentTimetable.pdf";
            $("#ppt").attr("src",src);
        })
*/
        /**
         * 获取实验对应的体验人次
         */
        $.ajax({
            url : ctx + '/system/echarts/stuCount',
            type : 'get',
            dataType : 'json',
            success : function (data) {
                console.log(data)
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom,'macarons');
                var app = {};
                option = null;
                var data = genData(data.length);

                option = {
                    title: {
                        text: '实验体验人次',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 100,
                        top: 20,
                        bottom: 20,
                        data: data.legendData,

                        selected: data.selected
                    },
                    series: [
                        {
                            name: '项目体验人数',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: data.seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                function genData(count) {
                    var nameList = [];
                    var legendData = [];
                    var seriesData = [];
                    var selected = {};
                    for (var i = 0; i < count; i++) {
                        legendData.push(data[i].experimentName);
                        seriesData.push({
                            name: data[i].experimentName,
                            value: data[i].count + 5000
                        });
                        selected[data[i].experimentName] = i < 6;
                    }

                    return {
                        legendData: legendData,
                        seriesData: seriesData,
                        selected: selected
                    };

                }
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })

        /**
         * 获取实验分数分布情况
         */
        $(function () {
            var id = $("#experiment").val();
            getScore(id)
        })

        function getScore(value) {
            $.ajax({
                url : ctx + '/system/echarts/experimentScore',
                type : 'get',
                data : {"experimentId":value},
                dataType : 'json',
                success : function (data) {
                    var dom = document.getElementById("score");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {
                        title: {
                            text: '实验成绩分布',
                            /*subtext: '纯属虚构',*/
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['优秀:' + (data["excellent"]+3000), '合格:' + (data["success"]+1500), '不合格:'+ (data["fail"]+200)]
                        },
                        series: [
                            {
                                name: '体验情况',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: data["excellent"] + 3000, name: '优秀:'+ (data["excellent"]+3000)},
                                    {value: data["success"] + 1500, name: '合格:'+ (data["success"]+1500)},
                                    {value: data["fail"] + 200, name: '不合格:' + (data["fail"]+200)}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    ;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }
            })
        }

        /*function changeExperiment(){
            var id = $("#experiment").val();
            getScore(id);
        }*/


        $.ajax({
            url : ctx + '/system/echarts/getDescribe',
            type : 'get',
            dataType : 'json',
            success : function (value) {
                /**
                 * 获取实验的条形图
                 *     条形图分别有实验的最长时间，最短时间，最高分，最低分和体验人次
                 */
                var dom = document.getElementById("overall");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                var posList = [
                    'left', 'right', 'top', 'bottom',
                    'inside',
                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                ];

                app.configParameters = {
                    rotate: {
                        min: -90,
                        max: 90
                    },
                    align: {
                        options: {
                            left: 'left',
                            center: 'center',
                            right: 'right'
                        }
                    },
                    verticalAlign: {
                        options: {
                            top: 'top',
                            middle: 'middle',
                            bottom: 'bottom'
                        }
                    },
                    position: {
                        options: echarts.util.reduce(posList, function (map, pos) {
                            map[pos] = pos;
                            return map;
                        }, {})
                    },
                    distance: {
                        min: 0,
                        max: 100
                    }
                };

                app.config = {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: function () {
                        var labelOption = {
                            normal: {
                                rotate: app.config.rotate,
                                align: app.config.align,
                                verticalAlign: app.config.verticalAlign,
                                position: app.config.position,
                                distance: app.config.distance
                            }
                        };
                        myChart.setOption({
                            series: [{
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }]
                        });
                    }
                };


                var labelOption = {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                };

                option = {
                    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data: value["experimentName"]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '最高分',
                            type: 'bar',
                            barGap: 0,
                            label: labelOption,
                            data: value["maxScore"]
                        },
                        {
                            name: '最低分',
                            type: 'bar',
                            label: labelOption,
                            data: value["minScore"]
                        },
                        {
                            name: '最高用时(分钟)',
                            type: 'bar',
                            label: labelOption,
                            data: value["maxTime"]
                        },
                        {
                            name: '最低用时(分钟)',
                            type: 'bar',
                            label: labelOption,
                            data: value["minTime"]
                        }
                    ]
                };;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })
    </script>
</body>
</html>
